<template>
  <div class="main">
    <div class="table">
      <template>
        <el-button @click="resetDateFilter">重置</el-button>
        <el-table ref="filterTable"
                  :data="tableData"
                  style="width: 100%"
                  border
                  height="590">
          <el-table-column label="序号"
                           width="60"
                           align="center">
            <template slot-scope="scope">
              <span v-text="getIndex(scope.$index)"></span>
            </template>
          </el-table-column>

          <el-table-column prop="time"
                           label="日期"
                           sortable
                           width="180">
          </el-table-column>

          <el-table-column prop="username"
                           label="用户名"
                           width="100">
          </el-table-column>

          <el-table-column prop="url"
                           label="请求url"
                           :formatter="formatter">
          </el-table-column>

          <el-table-column prop="params"
                           label="参数">
          </el-table-column>

          <el-table-column prop="ip"
                           label="IP地址">
          </el-table-column>

          <el-table-column prop="operation"
                           label="操作"
                           width="100"
                           column-key="operation"
                           :filters="[{ text: '用户登录', value: '用户登录' },
                            { text: '删除', value: '删除' }, { text: '用户修改', value: '用户修改' }
                            ]"
                           :filter-method="filterTag"
                           filter-placement="bottom-end">
            <template slot-scope="scope">
              <el-tag :type="scope.row.operation === '用户登录' ? 'primary' : 'success'"
                      disable-transitions>{{scope.row.operation}}</el-tag>
            </template>
          </el-table-column>
        </el-table>

        <center>
          <!-- 分页 -->
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="pageNumber"
                         :page-sizes="[30, 60, 90, 120]"
                         :page-size="pageSize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="this.totalRow"
                         style="margin-top:10px">
          </el-pagination>
        </center>
      </template>
    </div>
  </div>
</template>

<script>
import { findLogs } from '@/api/log'
export default {
  data () {
    return {
      tableData: [],

      //分页数据
      pageNumber: 1,//当前页
      pageSize: 30,//每页大小
      totalRow: 0,//总条数
      totalPage: 0,//总页数


    }
  },
  methods: {
    resetDateFilter () {
      this.$refs.filterTable.clearFilter('operation');
    },
    clearFilter () {
      this.$refs.filterTable.clearFilter();
    },
    formatter (row, column) {
      return row.url;
    },
    filterTag (value, row) {
      return row.operation === value;
    },
    filterHandler (value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },

    //分页点击方法
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val
      var params = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      }
      this.findAll(params)
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`);
      this.pageNumber = val
      var params = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      }
      this.findAll(params)
    },

    //分页数据获取
    findAll (params) {
      findLogs("/logs/findAll", params).then(
        res => {
          if (res.code === 200) {
            this.tableData = res.data.list
            this.totalRow = res.data.totalRow
            this.loading = false
            this.$message("获取数据成功")

          }
          else if (res.code === 500) {
            this.$message(res.data)
          }
        }
      )
    },
    //添加表格序号
    getIndex ($index) {
      return (this.pageNumber - 1) * this.pageSize + $index + 1
    },

  },

  //初始化表格
  created () {
    var params = {
      pageNumber: this.pageNumber,
      pageSize: this.pageSize
    }
    this.findAll(params)
  }

}
</script>

<style scoped>
.main {
  width: 100%;
  height: 700px;
  margin-top: 10px;
}
.table {
  width: 80%;
  margin-left: 160px;
}
.el-pagination__total {
  color: #f1f3f8 !important;
}
</style>